<template>
    <div class="largeScreen">
        <div class="current_time" >时间：{{ currentDateTime }}</div>
        <div class="largeScreen-top">
            <div class="top_select">
                <el-cascader class="custom-cascader-bg" :options="comList" popper-class="pc_sel-popper"
                    placeholder="全集团" :props="{ checkStrictly: true }" clearable @change="handleChange"
                    v-model="selectedValue" :show-all-levels="false">
                    <!-- <template slot-scope="{ node, data }">
                        <span>{{ data.label }}</span>
                        <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                    </template> -->
                </el-cascader>
            </div>
            <div class="top-items">
                <div class="top-item1 ">
                    <div class="item1">
                        <div class="item1-top">采购总金额 (元)</div>
                        <div class="item1-bottom"> {{ data.total_buy_amount }}</div>
                    </div>
                    <div class="item2">
                        <div class="item2-top" @click="go_gs_order">公司：{{ data.company_buy_amount }}</div>
                        <div class="item2-bottom" @click="go_zg_order">职工：{{ data.person_buy_amount }}</div>
                    </div>
                </div>
                <div class="top-item1">

                    <div class="item1">
                        <div class="item1-top">采购总数量 (笔)</div>
                        <div class="item1-bottom"> {{ data.total_buy_num }}</div>
                    </div>
                    <div class="item2">
                        <div class="item2-top" @click="go_gs_order">公司：{{ data.company_buy_num }}</div>
                        <div class="item2-bottom" @click="go_zg_order">职工：{{ data.person_buy_num }}</div>
                    </div>
                </div>
                <div class="top-item2">
                    <div class="item1" @click="go_gs_user" style="cursor: pointer;">
                        <div class="item1-top">已注册公司账号</div>
                        <div class="item1-bottom"> {{ data.company_num }}</div>
                    </div>
                    <div class="item1" @click="go_zg_user" style="cursor: pointer;">
                        <div class="item1-top">已注册职工账号</div>
                        <div class="item1-bottom"> {{ data.person_num }}</div>
                    </div>
                </div>
                <div class="top-item1">
                    <div class="item1">
                        <div class="item1-top">在售商品数量</div>
                        <div class="item1-bottom"> {{ data.total_goods_num }}</div>
                    </div>
                    <div class="item2">
                        <div class="item2-top" @click="go_gs_goods">公司：{{ data.company_goods_num }}</div>
                        <div class="item2-bottom" @click="go_zg_goods">职工：{{ data.person_goods_num }}</div>
                    </div>
                </div>
                <div class="top-item1">

                    <div class="item1">
                        <div class="item1-top">合作供应商</div>
                        <!-- <div class="item1-bottom"> {{ data.company_shop_num + data.person_shop_num }}</div>  -->
                        <div class="item1-bottom"> 10</div>
                    </div>
                    <div class="item2">
                        <!-- <div class="item2-top" @click="go_gs_shop">公司：13</div>
                        <div class="item2-bottom" @click="go_zg_shop">职工：2</div> -->
                        <div class="item2-top" >公司：8</div>
                        <div class="item2-bottom" >职工：2</div>
                    </div>
                </div>

            </div>
        </div>
        <div class="largeScreen-con">
            <div class="con-left">
                <div class="left1">
                    <largeScreen1 ref="left1"></largeScreen1>
                </div>
                <div class="left2">
                    <div class="left2-1">
                        <largeScreen2 ref="left2"></largeScreen2>
                    </div>
                    <div class="left2-2">
                        <largeScreen2_2 ref="left2_2"></largeScreen2_2>
                    </div>
                </div>
                <div class="left3">
                    <div class="con-right-bottom">
                        <div class="bottom_title">
                            <div class="top-title"><span class="gradient-text">采购金额排名</span></div>
                            <div class="top-btns">
                                <div class="top-btn" @click="change_l_sysbtn(item)"
                                    :class="item.isActive ? 'active_btn' : ''" v-for="item, index in left_bot_btns"
                                    :key="index">{{ item.name }}</div>
                            </div>
                        </div>
                        <div class="bottom_nav">
                            <div class="btns">
                                <div class="se-btn " @click="change_l_dateBtn(item)"
                                    :class="item.isSelected ? 'active_btn' : ''" v-for="item, index in datebtn1"
                                    :key="index">{{
                                        item.text }}</div>
                            </div>
                        </div>
                        <div class="bottom_table  ">
                            <div class="table-box ">
                                <el-table ref="singleTable" :data="bottomList_l" highlight-current-row max-height="220"
                                    :row-class-name="tableRowClassName" @current-change="handleCurrentChange"
                                    style="width: 100%">
                                    <el-table-column type="index" width="60" label="排名" align='center'>
                                    </el-table-column>
                                    <el-table-column v-if="s_type1 == 1" label="公司名称" align='center' style="cursor: pointer;">
                                        <template slot-scope="scope">
                                            <el-popover trigger="hover" placement="top">
                                                <p> {{ scope.row.name }}</p>
                                                <div slot="reference" class="name-wrapper">
                                                    <div style="cursor: pointer;" @click="go_money_order(scope.row.pid)"  class="table_name">{{ scope.row.name }}</div>
                                                </div>
                                            </el-popover>
                                        </template>
                                    </el-table-column>
                                    <el-table-column v-if="s_type1 == 2" label="职工名称" align='center'>
                                        <template slot-scope="scope">
                                            <el-popover trigger="hover" placement="top">
                                                <p> {{ scope.row.name }}</p>
                                                <div slot="reference" class="name-wrapper">
                                                    <div style="cursor: pointer;" @click="go_money_order(scope.row.user_id)"  class="table_name">{{ scope.row.name }}</div>
                                                </div>
                                            </el-popover>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="order_num" label="采购订单数" width="120" align='center'>
                                    </el-table-column>
                                    <el-table-column prop="order_amount" label="交易总额(元)" align='center'>
                                    </el-table-column>
                                    <el-table-column prop="average_price" label="单笔均价(元)" align='center'>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="left3-1">
                        <largeScreen3 ref="left3"></largeScreen3>
                    </div>
                    <div class="left3-2">
                        <largeScreen3_2 ref="left3_2"></largeScreen3_2>
                    </div> -->
                </div>
            </div>
            <div class="con-center">
                <div class="center-top">
                    <largeScreen4 ref="cernter1" :today_info="today_info"></largeScreen4>
                </div>
                <div class="center-bottom">
                    <div class="center-bottom-top">
                        <div class="top-title"><span class="gradient-text">今日订单</span></div>
                        <div class="top-btns">
                            <div class="top-btn" @click="change_c_btn(item)" :class="item.isActive ? 'active_btn' : ''"
                                v-for="item, index in center_bot_btns" :key="index">{{ item.name }}</div>
                        </div>
                    </div>
                    <div class="center-bottom-con">
                        <vue-seamless-scroll :data="bottomList" :class-option="optionHover" class="seamless-warp">
                            <div class="con-list">
                                <div class="list-item" v-for="item in bottomList" :key="item.id"
                                    @click="go_order_detail(item.order_sn)">
                                    <div class="item-time">{{ item.pay_time }}</div>
                                    <div class="item-name">{{ item.user_name }} </div>
                                    <div class="item-word">采购了{{ item.goods_num }}件商品,<span
                                            style="margin-left: 8px;">订单金额</span>
                                    </div>
                                    <div class="item-num">{{ item.order_amount }}元</div>
                                </div>
                            </div>
                        </vue-seamless-scroll> 
                    </div>
                </div>
            </div>
            <div class="con-right">
                <div class="con-right-top">
                    <largeScreen5 ref="lar5"></largeScreen5>
                </div>
                <div class="con-right-bottom">
                    <div class="bottom_title">
                        <div class="top-title"><span class="gradient-text">合作供应商排行</span></div>
                        <div class="top-btns">
                            <div class="top-btn" @click="change_r_sysbtn(item)"
                                :class="item.isActive ? 'active_btn' : ''" v-for="item, index in right_bot_btns"
                                :key="index">{{ item.name }}</div>
                        </div>
                    </div>
                    <div class="bottom_nav">
                        <div class="btns">
                            <div class="se-btn " @click="change_r_dateBtn(item)"
                                :class="item.isSelected ? 'active_btn' : ''" v-for="item, index in datebtn2"
                                :key="index">{{
                                    item.text }}</div>
                        </div>
                    </div>
                    <div class="bottom_table  ">
                        <div class="table-box ">
                            <el-table ref="singleTable" :data="bottomList_r" highlight-current-row max-height="220"
                                :row-class-name="tableRowClassName" @current-change="handleCurrentChange"
                                style="width: 100%">
                                <el-table-column type="index" width="60" label="排名" align='center'>
                                </el-table-column>
                                <el-table-column label="供应商名称" align='center'>
                                    <template slot-scope="scope">
                                        <el-popover trigger="hover" placement="top">
                                            <p> {{ scope.row.name }}</p>
                                            <div slot="reference" class="name-wrapper">
                                                <div class="table_name" style="cursor: pointer;" @click="go_shop_order(scope.row.name)">{{ scope.row.name }}</div>
                                            </div>
                                        </el-popover>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="order_num" label="采购订单数" width="120" align='center'>
                                </el-table-column>
                                <el-table-column prop="order_amount" label="交易总额(元)" align='center'>
                                </el-table-column>
                                <el-table-column prop="average_price" label="单笔均价(元)" align='center'>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>



<script>
import axios from 'axios'
import largeScreen1 from '../components/largeScreen-1.vue'
import largeScreen2 from '../components/largeScreen-2.vue'
import largeScreen2_2 from '../components/largeScreen-2_2.vue'
import largeScreen3 from '../components/largeScreen-3.vue'
import largeScreen3_2 from '../components/largeScreen-3_2.vue'
import largeScreen4 from '../components/largeScreen-4.vue'
import largeScreen5 from '../components/largeScreen-5.vue'

export default {
    components: {
        largeScreen1,
        largeScreen2,
        largeScreen2_2,
        largeScreen3,
        largeScreen3_2,
        largeScreen4,
        largeScreen5,
    },
    layout: 'void',
    data() {
        return {
            currentDate: new Date(),
            selectedValue: [],
            s_type1: '1',
            bottomList_l: [],
            type1: '1',
            datebtn1: [
                {
                    text: '近7天',
                    isSelected: true,
                    type: '1'
                },
                {
                    text: '近30天',
                    isSelected: false,
                    type: '2'
                },
                {
                    text: '历史总计',
                    isSelected: false,
                    type: ''
                },
            ],
            s_type2: '1',
            bottomList_2: [],
            type2: '1',
            datebtn2: [
                {
                    text: '近7天',
                    isSelected: true,
                    type: '1'
                },
                {
                    text: '近30天',
                    isSelected: false,
                    type: '2'
                },
                {
                    text: '历史总计',
                    isSelected: false,
                    type: ''
                },
            ],
            today_info: {},
            gradientTextStyle: {
                color: 'white',
                backgroundImage: 'linear-gradient(to bottom, #30CFD0 0%, #330867 100%)',
                WebkitBackgroundClip: 'text',
                WebkitTextFillColor: 'transparent',
                backgroundClip: 'text',
            },
            company_id: '',

            left_bot_btns: [
                { name: '公司采购', isActive: true, type: '1' },
                { name: '职工采购', isActive: false, type: '2' },
            ],
            right_bot_btns: [
                { name: '公司采购', isActive: true, type: '1' },
                { name: '职工采购', isActive: false, type: '2' },
            ],
            center_bot_btns: [
                { name: '公司采购', isActive: true, type: '1' },
                { name: '职工采购', isActive: false, type: '2' },
            ],
            bottomList_r: [],
            data: [],
            bottomList: [],
            comList: [],
        }
    },
    async created() {
        this.getIndexData(localStorage.getItem('change_id'))
        this.center_bot_btns.forEach(item => {
                item.isActive = false
            })
            this.center_bot_btns[0].isActive=true
        this.getCenterBottom(1, localStorage.getItem('change_id'))
        this.getLeftBottom()
        this.getRightBottom()
        this.getComList()
    },
    beforeDestroy() {
        // 组件销毁时清除定时器
        if (this.refreshInterval) {
            clearInterval(this.refreshInterval);
        }
    },
    mounted() {
        setInterval(() => {
      this.currentDate = new Date();
    }, 1000);
        this.restoreValue()
        this.refreshInterval = setInterval(async () => {
            // window.location.reload();
            this.center_bot_btns.forEach(item => {
                item.isActive = !item.isActive
            })
            this.right_bot_btns.forEach(item => {
                item.isActive = !item.isActive
            })
            this.getLeftBottom()
            this.getIndexData(localStorage.getItem('change_id'))
            this.center_bot_btns.forEach(item => {
                item.isActive = false
            })
            this.center_bot_btns[0].isActive=true
            this.getCenterBottom(1, localStorage.getItem('change_id'))
            this.getRightBottom()
            this.getComList()
            await this.$refs.left1.getLargeData()
            this.$refs.left1.init()
            await this.$refs.lar5.getIndexData()
            this.$refs.lar5.init()
            this.$refs.lar5.init1()
            this.$refs.lar5.init2()
            this.$refs.lar5.init3()
            this.$refs.lar5.init4()
        }, 300000); // 300000 毫秒 = 5 分钟

    },
    computed: {
        currentDateTime() {
      return (
        this.currentDate.getFullYear() +
        "." +
        (this.currentDate.getMonth() + 1).toString().padStart(2, "0") +
        "." +
        this.currentDate.getDate().toString().padStart(2, "0") +
        " " +
        this.currentDate.getHours().toString().padStart(2, "0") +
        ":" +
        this.currentDate.getMinutes().toString().padStart(2, "0") +
        ":" +
        this.currentDate.getSeconds().toString().padStart(2, "0")
      );
    },
        total_order_num() {
            return this.data.total_delivery_order_num + + this.data.total_finish_order_num + + this.data.total_receive_order_num
        },
        optionHover() {
            return {
                step: 0.5, // 数值越大速度滚动越快
                limitMoveNum: 6, // 开始无缝滚动的数据量 this.dataList.length
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
            };
        },
    },
    methods: {

        restoreValue() {
            const savedValue = localStorage.getItem('cascaderValue');
            if (savedValue !== null) {
                this.selectedValue = JSON.parse(savedValue);
            }
        },
        saveValue() {
            localStorage.setItem('cascaderValue', JSON.stringify(this.selectedValue));
        },
        go_zg_goods_classify(val) {
            window.open(`https://api.gygsjcpt.cn/admin/goods.PersonGoods/lists.html?platform_cate_id=${val}&is_viz=1`, '_blank')
        },
        go_gs_shop() {
            window.open(`https://api.gygsjcpt.cn/admin/shop.Store/lists.html?system_type=1&is_viz=1`, '_blank')
        },
        go_zg_shop() {
            window.open(`https://api.gygsjcpt.cn/admin/shop.Store/lists.html?system_type=2&is_viz=1`, '_blank')
        },
        go_gs_goods() {
            window.open(`https://api.gygsjcpt.cn/admin/goods.Goods/lists.html?type=1&is_viz=1`, '_blank')
        },
        go_zg_goods() {
            window.open(`https://api.gygsjcpt.cn/admin/goods.PersonGoods/lists.html?type=1&is_viz=1`, '_blank')
        },
        go_gs_user() {
            window.open(`https://api.gygsjcpt.cn/admin/user.User/lists.html?is_viz=1`, '_blank')
        },
        go_zg_user() {
            window.open(`https://api.gygsjcpt.cn/admin/user.PersonUser/lists.html?is_viz=1`, '_blank')
        },
        go_gs_order(val) {
            window.open(`https://api.gygsjcpt.cn/admin/order.Order/lists.html?system_type=1&is_viz=1`, '_blank')
        },
        go_zg_order(val) {
            window.open(`https://api.gygsjcpt.cn/admin/order.Order/lists.html?system_type=2&is_viz=1`, '_blank')
        },

        go_order_detail(val) {
            window.open(`https://api.gygsjcpt.cn/admin/order.Order/lists.html?search_key=order_sn&keyword=${val}&is_viz=1`, '_blank')
        },
        go_money_order(val){
            if (this.s_type1 == 1) {
                window.open(`https://api.gygsjcpt.cn/admin/order.Order/lists.html?pid=${val}&is_viz=1&system_type=1`, '_blank')
            }else{
                window.open(`https://api.gygsjcpt.cn//admin/order.Order/lists.html?search_key=user_id&keyword=${val}&is_viz=1`, '_blank')
            }
        },
        go_shop_order(val){
            window.open(`https://api.gygsjcpt.cn/admin/order.Order/lists.html?shop_name=${val}&is_viz=1`, '_blank')
        },
        change_l_dateBtn(item) {
            this.datebtn1.forEach(item => item.isSelected = false)
            item.isSelected = true;
            this.type1 = item.type
            this.getLeftBottom()
        },
        change_r_dateBtn(item) {
            this.datebtn2.forEach(item => item.isSelected = false)
            item.isSelected = true;
            this.type2 = item.type
            this.getRightBottom()
        },

        handleChange(val) {
            this.company_id = val[val.length - 1]
            localStorage.setItem('change_id', this.company_id)
            this.$refs.left1.change_com()
            this.getIndexData(localStorage.getItem('change_id'))
            this.$refs.left2.change_com()
            this.$refs.left2_2.change_com()
            this.$refs.cernter1.change_com()
            this.center_bot_btns.forEach(item => {
                item.isActive = false
            })
            this.center_bot_btns[0].isActive=true
            this.getCenterBottom(1, localStorage.getItem('change_id'))
            this.getRightBottom(1, this.company_id)
            this.saveValue()
        },
        change_l_sysbtn(item) {
            this.left_bot_btns.forEach(item => {
                item.isActive = false
            })
            item.isActive = true
            this.s_type1 = item.type
            this.getLeftBottom()
        },
        change_r_sysbtn(item) {
            this.right_bot_btns.forEach(item => {
                item.isActive = false
            })
            item.isActive = true
            this.s_type2 = item.type
            this.getRightBottom()
        },
        change_r_btn(item) {
            this.right_bot_btns.forEach(item => {
                item.isActive = false
            })
            item.isActive = true
            this.getRightBottom(item.type, this.company_id)
        },
        change_c_btn(item) {
            this.center_bot_btns.forEach(item => {
                item.isActive = false
            })
            item.isActive = true
            this.getCenterBottom(item.type, localStorage.getItem('change_id'))
        },
        tableRowClassName({ row, rowIndex }) {
            if (rowIndex === 1 || rowIndex === 3) {
                return 'warning-row';
            }
            return '';
        },
        handleCurrentChange(val) {
            this.currentRow = val;
        },
        handleCurrentChange() { },
        async getComList() {
            const res = await this.$axios.get('https://api.gygsjcpt.cn/api/visualization1/getCompanyList')
            this.comList = res.data.data

        },
        async getLeftBottom(type, id) {
            const res = await this.$axios.get(`https://api.gygsjcpt.cn/api/visualization2/data_11?type=${this.type1}&system_type=${this.s_type1}`)
            this.bottomList_l = res.data.data
        },
        async getCenterBottom(type, id) {
            const res = await this.$axios.get(`https://api.gygsjcpt.cn/api/visualization1/data_7?type=${type || 1}&company_id=${id}`)
            this.bottomList = res.data.data
        },
        async getRightBottom(type, id) {
            const res = await this.$axios.get(`https://api.gygsjcpt.cn/api/visualization2/data_12?type=${this.type2}&system_type=${this.s_type2}`)
            this.bottomList_r = res.data.data
        },
        async getIndexData(id) {
            const res = await this.$axios.get(`https://api.gygsjcpt.cn/api/visualization2/data_1?company_id=${id}`)
            this.data = res.data.data
            this.today_info = {
                num: this.data.today_order_num,
                price: this.data.today_order_amount
            }
            
        },
        async getLarge5() {
            const res = await this.$axios.get('https://api.gygsjcpt.cn/api/visualization/centerBottomData')
            this.data5 = res.data
        },
    }
}
</script>




<style lang="scss" scoped>

::v-deep {
    .top_select {
        .el-input__inner {
            border: #4c89e4 1px solid;
            height: 30px;
            padding-right: 50px;
            background: #ffffff00;
            background: linear-gradient(to bottom, #00000040 0%, #00bfff50 100%);
            color: #fff;
        }

        .el-input__icon {
            line-height: 0px;
        }
    }
}

::v-deep {

    .el-table th.el-table__cell.is-leaf,
    .el-table td.el-table__cell {
        border: none;
    }

    .el-table thead,
    .el-table .warning-row {
        background: #03174a;
    }

    .table_name,
    .cell {
        color: #fff;
    }

    .el-table__body tr.current-row>td.el-table__cell,
    .current-row {
        background: #ffffff00;
    }

    .el-table tr,
    .el-table::before {
        background: #ffffff00;
    }

    .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
        background: #ffffff00;
    }

    .el-table th.el-table__cell,
    .el-table {
        background: #ffffff00;
    }
}

.largeScreen {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: url('https://api.gygsjcpt.cn/pcimg/largeScreen-bg1..jpg');
    background-size: 100% 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;

    .current_time{
        position:absolute;
        top:20px;
        right:40px;
        color:#fff;
        font-size:16px;
    }
    .largeScreen-top {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 96%;
        margin-top: 7%;
        height: 50px;

        .top_select {
            position: absolute;
            top: 1%;
            left: 2%;
        }

        .top-items {
            width: 100%;
            display: grid;
            grid-template-columns: repeat(5, 19.5%);
            grid-gap: 1.2%;



            .top-item1 {
                box-sizing: border-box;
                padding-top: 12px;
                background: url('https://api.gygsjcpt.cn/pcimg/top_data_bg.png');
                background-size: 100% 100%;
                width: 100%;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                color: #fff;
                padding: 3% 5%;

                .item1 {
                    width: 48%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    .item1-top {
                        font-size: 14px;
                        margin-bottom: 10px;
                    }

                    .item1-bottom {
                        // font-weight: 700;
                        color: #00ecff;
                        font-size: 28px;
                    }
                }

                .item2 {
                    width: 48%;
                    font-size: 14px;

                    .item2-top {
                        width: 100%;
                        border: 1px #22408b solid;
                        border-radius: 20px;
                        padding: 5px 10px;
                        margin-bottom: 5px;
                        cursor: pointer;

                        &:hover {
                            background: linear-gradient(to right, #1d87e4, #032a72);
                        }
                    }

                    .item2-bottom {
                        border: 1px #22408b solid;
                        border-radius: 20px;
                        padding: 5px 13px;
                        cursor: pointer;

                        &:hover {
                            background: linear-gradient(to right, #1d87e4, #032a72);
                        }
                    }
                }
            }

            .top-item2 {
                box-sizing: border-box;
                padding-top: 12px;
                background: url('https://api.gygsjcpt.cn/pcimg/top_data_bg.png');
                background-size: 100% 100%;
                width: 100%;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                color: #fff;
                padding: 0 5%;

                .item1 {
                    width: 48%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    .item1-top {
                        font-size: 14px;
                        margin-bottom: 10px;
                    }

                    .item1-bottom {
                        color: #00ecff;
                        font-size: 28px;
                    }
                }


            }



        }
    }

    .largeScreen-con {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 96%;
        flex: 1;
        margin-top: 2%;
        overflow: hidden;

        .con-left {
            width: 29%;
            height: 100%;

            .left1 {
                width: 100%;
                height: 25%;
                box-sizing: border-box;
            }

            .left2 {
                width: 100%;
                height: 30.5%;
                box-sizing: border-box;
                margin: 2% 0;
                display: flex;
                justify-content: space-between;

                .left2-1 {
                    width: 49%;
                    height: 100%;
                    box-sizing: border-box;

                }

                .left2-2 {
                    width: 49%;
                    height: 100%;
                    box-sizing: border-box;

                }
            }

            .left3 {
                width: 100%;
                height: 40%;
                box-sizing: border-box;
                margin: 1% 0;
                display: flex;
                justify-content: space-between;

            }

            .con-right-bottom {
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                background: url('https://api.gygsjcpt.cn/pcimg/right_bottom_bg.png');
                background-size: 100% 100%;
                margin-bottom: 20px;


                .bottom_table {
                    height: 65%;
                    // overflow-y: scroll;
                    -webkit-scrollbar: 1px;
                    -webkit-scrollbar-track: 1px;
                    -webkit-scrollbar-thumb: 1px;

                    .table_box {
                        overflow-y: scroll;
                        -webkit-scrollbar: 1px;
                        -webkit-scrollbar-track: 1px;
                        -webkit-scrollbar-thumb: 1px;

                    }
                }

                .bottom_title {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 1%;
                    align-items: center;
                    margin-top: 3.5%;

                    .top-title {
                        color: #fff;
                        padding-left: 10%;
                    }
                }

                .top-btns {
                    display: flex;
                    justify-content: space-between;
                    width: 45%;
                    padding-right: 3%;

                    .top-btn {
                        cursor: pointer;
                        height: 36px;
                        padding: 5px 15px;
                        color: #1b84b2;
                    }

                    .active_btn {
                        border: 1.5px solid #234b93;
                        background: linear-gradient(to bottom, #00000040 0%, #00bfff50 100%);
                        color: #00ecf9;
                    }
                }

                .table_name {
                    width: 100%;
                    white-space: nowrap;
                    /* 不换行 */
                    overflow: hidden;
                    /* 隐藏超出的内容 */
                    text-overflow: ellipsis;
                    /* 用省略号表示被隐藏的部分 */
                }
            }
        }

        .con-center {
            width: 39%;
            height: 100%;
            display: flex;
            flex-direction: column;

            .center-top {
                height: 65%;
                width: 100%;
            }

            .center-bottom {
                height: 33%;
                width: 100%;
                display: flex;
                flex-direction: column;
                // justify-content: space-between;
                background: url('https://api.gygsjcpt.cn/pcimg/center_bottom_bg.png');
                background-size: 100% 100%;
                overflow: hidden;

                .center-bottom-top {
                    width: 100%;
                    height: 15%;
                    display: flex;
                    justify-content: space-between;
                    color: #fff;
                    overflow: hidden;
                    align-items: center;
                    padding-left: 7%;
                    margin-top: 2%;

                    .top-btns {
                        display: flex;
                        justify-content: space-between;
                        width: 40%;
                        padding-right: 3%;

                        .top-btn {
                            cursor: pointer;
                            height: 36px;
                            padding: 5px 15px;
                            color: #1b84b2;
                        }

                        .active_btn {
                            border: 1.5px solid #234b93;
                            background: linear-gradient(to bottom, #00000040 0%, #00bfff50 100%);
                            color: #00ecf9;
                        }
                    }
                }

                .center-bottom-con {
                    width: 100%;
                    height: 75%;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    overflow: hidden;

                    .con-list {
                        width: 100%;
                        height: 100%;
                        display: grid;
                        // grid-template-rows: repeat(10, 20%);
                        padding-left: 4%;

                        .list-item {
                            box-sizing: border-box;
                            width: 100%;
                            height: 100%;
                            display: flex;
                            align-items: end;
                            color: #000;
                            font-size: 14px;
                            padding: 10px 0;
                            cursor: pointer;
                        }

                        .item-time {
                            color: #95bcf9;
                            margin-right: 20px;
                        }

                        .item-name {
                            width: 40%;
                            color: #fff;
                        }

                        .item-word {
                            color: #fff;
                            margin-right: 10px;
                        }

                        .item-num {
                            color: #fff;
                        }
                    }
                }
            }
        }

        .con-right {
            width: 29%;
            height: 100%;
            display: flex;
            flex-direction: column;

            .con-right-top {
                width: 100%;
                height: 55%;
                margin-bottom: 5%;
            }

            .con-right-bottom {
                width: 100%;
                height: 40%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                background: url('https://api.gygsjcpt.cn/pcimg/right_bottom_bg.png');
                background-size: 100% 100%;
                margin-bottom: 20px;



                .bottom_table {
                    height: 65%;
                    // overflow-y: scroll;
                    -webkit-scrollbar: 1px;
                    -webkit-scrollbar-track: 1px;
                    -webkit-scrollbar-thumb: 1px;

                    .table_box {
                        overflow-y: scroll;
                        -webkit-scrollbar: 1px;
                        -webkit-scrollbar-track: 1px;
                        -webkit-scrollbar-thumb: 1px;

                    }
                }

                .bottom_title {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 1%;
                    align-items: center;
                    margin-top: 3.5%;

                    .top-title {
                        color: #fff;
                        padding-left: 10%;
                    }
                }

                .top-btns {
                    display: flex;
                    justify-content: space-between;
                    width: 45%;
                    padding-right: 3%;

                    .top-btn {
                        cursor: pointer;
                        height: 36px;
                        padding: 5px 15px;
                        color: #1b84b2;
                    }

                    .active_btn {
                        border: 1.5px solid #234b93;
                        background: linear-gradient(to bottom, #00000040 0%, #00bfff50 100%);
                        color: #00ecf9;
                    }
                }

                .table_name {
                    width: 100%;
                    white-space: nowrap;
                    /* 不换行 */
                    overflow: hidden;
                    /* 隐藏超出的内容 */
                    text-overflow: ellipsis;
                    /* 用省略号表示被隐藏的部分 */
                }
            }
        }
    }

    .bottom_nav {
        width: 100%;
        color: #fff;
        justify-content: center;
        align-items: center;
        display: flex;

        .btns {
            width: 50%;
            justify-content: space-between;
            align-items: center;
            display: flex;
            padding: 10px 0;
            cursor: pointer;

            .se-btn {
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 13px;
                padding: 5px 12px;
                border-radius: 20px;
                border: 1px solid #06318c;
            }

            .active_btn {
                background: linear-gradient(to right, #239dfa, #032d75);
            }
        }
    }
}
</style>
<style>
/* .scroller::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.scroller::-webkit-scrollbar-track {
    background-color: transparent;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
}

.scroller::-webkit-scrollbar-thumb {
    background-color: rgb(147, 147, 153, 0.5);
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
} */
/* 全局覆盖 Element UI 表格滚动条样式 */
.el-table--scrollable-y .el-table__body-wrapper {
  overflow-y: auto !important;
}
 
/* 滚动条样式 */
.el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar {
  width: 8px; /* 水平滚动条宽度 */
  height: 8px; /* 垂直滚动条高度 */
}
 
.el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background-color: rgba(0, 0, 0, 0.1);
  background-color: rgb(147, 147, 153, 0.5);
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
}
 
.el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-track {
  background-color: rgb(147, 147, 153, 0.5);
  background-color: transparent;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
}
 
.el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-corner {
  background-color: rgb(147, 147, 153, 0.5);
  background-color: transparent;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
}
 
/* 针对Firefox的滚动条样式 */
.el-table--scrollable-y .el-table__body-wrapper {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  background-color: transparent;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
}
</style>
